@import '../../../styles/mixins.scss';

$card_size: theme('height.128');
$font-size: theme('fontSize.xs');

.dark {
  .card_gradient {
    @include card-gradient(theme('colors.myTheme.primary'));
  }
}

.light {
  .card_gradient {
    @include card-gradient(theme('colors.myTheme.light'));
  }
}

.dark, .light {
  @apply 
  h-full
  w-full

  relative
  flex
  items-center;

  .card_wrapper {
    @apply
    h-full
    w-full
    relative;

    .card {
      @apply
      relative
      h-full
      w-full
      flex
      items-center
      justify-center
      aspect-square
      rounded-2xl
      overflow-hidden
      cursor-default;
      

      .card_gradient {
        @apply
        absolute
        h-full
        w-full
        pointer-events-none
        z-30;
      }

      .card_letters {
        @include focus-bgText();

        @apply 
        relative
        top-0
        left-0
        h-full
        w-full
        text-myTheme-accent
        text-xs
        text-center
        font-medium
        break-all
        text-wrap
        opacity-0;
        ;
      }

      &:hover {
        .card_letters {
        @apply opacity-70;
        }
      }
    }
  }
}



@media(max-width: 600px) {
  $card_size: theme('height.60');
  
  .card {
    @apply rounded-2xl;
  }
}